<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  
  <canvas id="can"></canvas>

  <script>
    const oCan = document.getElementById('can');
    const ctx = oCan.getContext('2d');

    const documentElement = document.documentElement;

    oCan.width = documentElement.clientWidth;
    oCan.height = documentElement.clientHeight;

    /**
     * fillText()    填充文本（实心）
     * strokeText()  描边文本（空心）
     */ 

    /*
      参数：
      1. 文本       （必填）
      2. 横坐标     （必填）
      3. 纵坐标     （必填）
      4. 文本最大宽度（可选）
    */

    /**
     * font 设置文本样式、尺寸、字体 (按顺序，同步设置)
     * 参数：
     * 1. 样式 （可选）
     * 2. 尺寸 （可选）
     * 3. 字体 （可选）
     * 
     * 默认值：10px sans-serif
     */

    // ctx.font = 'bold 50px serif';
    // ctx.font = '50px serif';
    // ctx.font = '';
    // ctx.font = '30px sans-serif';
    // ctx.fillStyle = 'red';
    // ctx.fillText('I LOVE YOU!!!', 500, 300);
    // ctx.font = 'bold 50px serif';
    // ctx.strokeStyle = 'orange';
    // ctx.strokeText('I LOVE YOU!!!', 500, 300);

    ctx.font = '50px serif';
    ctx.strokeStyle = 'red';

    // 横坐标
    ctx.moveTo(500, 100);
    ctx.lineTo(1000, 100);
    // 纵坐标
    ctx.moveTo(500, 100);
    ctx.lineTo(500, 600);
    ctx.stroke();
    
    // // textAlign：
    // /**
    //  * 将文本的左边或者右边对齐Y轴
    //  * start/left等效
    //  * end/right等效
    //  */
    // ctx.textAlign = 'left';
    // ctx.fillText('LEFT TEXT', 500, 100);
    // ctx.textAlign = 'right';
    // ctx.fillText('RIGHT TEXT', 500, 150);
    // ctx.textAlign = 'start';
    // ctx.fillText('START TEXT', 500, 200);
    // ctx.textAlign = 'end';
    // ctx.fillText('END TEXT', 500, 250);

    // ctx.fillText 第四个参数: 最大文本绘制宽度
    // ctx.font = '50px serif';
    // ctx.fillText('I LOVE YOU!!!', 500, 100, 50);

    // textBaseline: 文本基线
    /**
     * top: 文本顶部对齐X轴
     * hanging: 文本顶部对齐X轴
     * middle: 文本贯穿X轴
     * alphabetic: 以英文字母为基准的对齐，特征是文本底部对齐X轴
     * idiographic: 以表意文字为基准的对齐，特征文本底部对齐X轴
     * bottom: 文本底部对齐X轴
     */ 
    // ctx.textBaseline = 'top';
    // ctx.textBaseline = 'hanging';
    // ctx.textBaseline = 'middle';
    // ctx.textBaseline = 'alphabetic';
    // ctx.textBaseline = 'idiographic';
    // ctx.textBaseline = 'bottom';
    // ctx.fillText('我爱你', 500, 100);

    // direction 兼容性比较差
    // ctx.direction = 'ltr'; // left to right
    // ctx.textAlign = 'end';
    // ctx.direction = 'rtl'; // right to left
    // ctx.textAlign = 'start';
    // ctx.fillText('I LOVE YOU!!!', 500, 100);

    // measureText(text) => 测量文本的尺寸位置的信息对象
    ctx.fillText('I', 500, 100);
    const info = ctx.measureText('I');
    console.log(info.width);
  </script>
</body>
</html>